<template>
  <!-- 底部订单组件 -->
  <div class="shopcart">
    <div class="content" @click="toggleList">
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo" :class="{'logos':totalCount>0}">
            <span class="iconfont icon-gouwuchekong"></span>
          </div>
          <div class="num" v-if="totalCount">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'prices':totalCount>0}">¥{{totalPrice}}</div>
        <div class="desc">另需配送费¥ {{deliveryPrice}}元</div>
      </div>
      <div class="content-right" @click.stop="pay">
        <div class="pay" :class="{'enough':enough}">{{payDesc}}</div>
      </div>
    </div>
    <!-- 购物栏 -->
    <!-- <transition name="fold"> -->
    <div class="shopcart-list" v-show="listShow">
      <div class="list-header">
        <div class="header-left">购物车</div>
        <div class="header-right" @click="empty">清空</div>
      </div>
      <div class="list-content" ref="listContent">
        <ul class="list-ul">
          <li v-for="(food,index) in selectFoods" :key="index">
            <div class="name">{{food.name}}</div>
            <div class="cartcontrol-wrapper">
              <div class="money">¥{{food.price*food.count}}</div>
              <cartcontrot :food="food"></cartcontrot>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- </transition> -->
     <transition name="mask">
    <div class="masking" v-show="listShow" @click="hideList"></div>
    </transition>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import cartcontrot from "../cartcontrot/cartcontrot";
export default {
  components: {
    cartcontrot
  },
  props: {
    selectFoods: {
      type: Array,
      default() {
        return [
          {
            price: 30,
            count: 1
          }
        ];
      }
    },
    deliveryPrice: {
      type: Number,
      default: 0
    },
    minPrice: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      fold: true
    };
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.selectFoods.forEach(food => {
        total += food.price * food.count;
      });
      return total;
    },
    totalCount() {
      let count = 0;
      this.selectFoods.forEach(food => {
        count += food.count;
      });
      return count;
    },
    payDesc() {
      //去结算按钮的函数
      if (this.totalPrice === 0) {
        return `¥ ${this.minPrice}元起送`;
      } else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice;
        return `还差${diff}元起送`;
      } else {
        return "去结算";
      }
    },
    enough() {
      if (this.totalPrice >= this.minPrice) {
        return true;
      } else {
        return false;
      }
    },
    //购物栏显示/隐藏
    listShow() {
      if (!this.totalCount) {
        this.fold = true;
        return false;
      }
      let show = !this.fold;
      if (show) {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.listContent, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      }
      return show;
    }
  },
  methods: {
    toggleList() {
      if (!this.totalCount) {
        return;
      }
      this.fold = !this.fold;
    },
    // 清空购物栏
    empty(){
      this.selectFoods.forEach((food)=>{
        food.count=0
      })
    },
    //点击购物栏上面的蒙版也能收起购物栏
    hideList(){
      this.fold=true
    },
    //点击结算
    pay(){
      if(this.totalPrice<this.minPrice){
        return;
      }else{
        alert(`支付${this.totalPrice}元`)
      }
    }
  }
};
</script>

<style lang = "scss">
.shopcart {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  height: 48px;
  background: #000;
  .content {
    display: flex;
    background: #141d27;
    font-size: 0;
    .content-left {
      flex: 1;
      .logo-wrapper {
        display: inline-block;
        position: relative;
        top: -10px;
        margin: 0 12px;
        padding: 6px;
        width: 56px;
        height: 56px;
        box-sizing: border-box;
        vertical-align: top;
        border-radius: 50%;
        background: #141d27;
        .num {
          position: absolute;
          top: 0;
          right: 0;
          width: 24px;
          height: 16px;
          background: red;
          border-radius: 16px;
          color: 10px;
          text-align: center;
          line-height: 16px;
          color: #fff;
          /* font-weight: 700; */
          font-size: 10px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
        }
        .logo {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #2b3d3c;
          display: flex;
          justify-content: center;
          align-items: center;
          .icon-gouwuchekong {
            font-size: 24px;
            color: rgba(255, 255, 255, 0.4);
          }
        }
        .logos {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: rgb(0, 160, 220);
          display: flex;
          justify-content: center;
          align-items: center;
          .icon-gouwuchekong {
            font-size: 24px;
            color: #fff;
          }
        }
      }
      .price {
        display: inline-block;
        vertical-align: top;
        margin-top: 12px;
        line-height: 24px;
        padding-right: 12px;
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 16px;
        font-weight: 700;
        color: #919396;
      }
      .prices {
        display: inline-block;
        vertical-align: top;
        margin-top: 12px;
        line-height: 24px;
        padding-right: 12px;
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 16px;
        font-weight: 700;
        color: #fff;
      }
      .desc {
        display: inline-block;
        vertical-align: top;
        margin: 12px 0 0 12px;
        line-height: 24px;
        padding-left: 12px;
        box-sizing: border-box;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.4);
      }
    }
    .content-right {
      flex: 0 0 105px;
      width: 105px;
      .pay {
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.4);
        background: #2b333b;
      }
      .enough {
        background: #00b43c;
        color: #fff;
      }
    }
  }
  .shopcart-list {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    transform: translate3d(0, -100%, 0);
    .list-header {
      width: 100%;
      height: 40px;
      background: #f3f5f7;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      .header-left {
        font-size: 14px;
        color: rgb(7, 17, 27);
        margin-left: 18px;
      }
      .header-right {
        font-size: 12px;
        color: rgb(0, 160, 220);
        margin-right: 18px;
      }
    }
    .list-content {
      width: 100%;
      max-height: 217px;
      background: #fff;
      overflow: hidden;
      .list-ul{
        li {
        height: 48px;
        width: 95%;
        margin: 0 auto;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-size: 12px;
          color: rgb(7, 17, 27);
        }
        .cartcontrol-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 8px;
          .money {
            font-size: 14px;
            font-weight: 700;
            color: rgb(240, 20, 20);
            margin-right: 12px;
          }
        }
      }
      }
      
    }
  }
  /* @keyframes fold-no {
    0%{
      transform: translate3d(0, -100%, 0);
    }
    100%{
      transform: translate3d(0, 0, 0);
    }
  }
  .fold-leave-active {
    animation: fold-no 2s linear 0s 1 normal forwards;
    transform: translate3d(0, 0, 0);
  }

  @keyframes fold-yes {
    0%{
      transform: translate3d(0, 0, 0);
    }
    100%{
      transform: translate3d(0, -100%, 0);
    }
  }
  .fold-enter-active {
    animation: fold-yes 2s linear 0s 1 normal forwards;
    transform: translate3d(0, -100%, 0);
  } */
  /* .fold-enter-active,
  .fold-leave-active {
    transition: all 3s;
    transform: translate3d(0, -100%, 0);
  }
  .fold-enter,
  .fold-leave-to {
    transform: translate3d(0, 0, 0);
  }
  .fold-enter-to,
  .fold-leave {
    transform: translate3d(0, -100%, 0);
  } */
  .masking{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 47px;
    /* border:1px solid red; */
    z-index: -2;
    background-color: rgba(0, 0, 0, 0.85);
  }
  .mask-enter-active,.mask-leave-active{
    transition: all 1s;
  }
  .mask-enter,.mask-leave-to{
    background: black;
    opacity: .3;
  }
}
</style>
